<template>
  <div class='space-y-2'>
      <div v-for="(item, index) in list" class='flex items-center space-x-1' :key="index">
        <Input
          class='w-[120px]'
          :disabled="readonly"
          :value="list[index].variable"
          @change="handleVarNameChange(index)"
          placeholder='变量名'
        />
        <VarReferencePicker
          :nodeId="nodeId"
          :readonly="readonly"
          isShowNodeName
          class='grow'
          :value="item.variable_type === VarKindType.constant ? (item.value || '') : (item.value_selector || [])"
          :isSupportConstantValue="isSupportConstantValue"
          @change="handleVarReferenceChange(index)"
          :defaultVarKindType="item.variable_type"
          :onlyLeafNodeVar="onlyLeafNodeVar"
          :filterVar="filterVar"
          :isSupportFileVar="isSupportFileVar"
        />
          <RiDeleteBinLine
            class='!bg-gray-100 !p-2 hover:!bg-gray-200'
            @click="handleVarRemove(index)"
          />
      </div>
  </div>
</template>
<script setup lang="ts" name="VarList">
import VarReferencePicker from './var-reference-picker.vue'
import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
import { RiDeleteBinLine } from '@remixicon/vue'
import { Input } from 'ant-design-vue'
import { ChangeEvent } from 'ant-design-vue/es/_util/EventInterface'

type Props = {
  nodeId: string
  readonly: boolean
  list: Variable[]
  onChange: (list: Variable[]) => void
  onVarNameChange?: (oldName: string, newName: string) => void
  isSupportConstantValue?: boolean
  onlyLeafNodeVar?: boolean
  filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
  isSupportFileVar?: boolean
}

const props = defineProps<Props>();


  const handleVarNameChange = (index: number) => {
    return (e: ChangeEvent) => {
      props.onVarNameChange?.(props.list[index].variable, e.target.value)
      const newList = [...props.list]
      newList[index].variable = e.target.value
      props.onChange(newList)
    }
  }

  const handleVarReferenceChange = (index: number) => {
    return (value: ValueSelector | string, varKindType: VarKindType) => {
      const newList = [...props.list];
      if (!props.isSupportConstantValue || varKindType === VarKindType.variable) {
        newList[index].value_selector = value as ValueSelector
        if (props.isSupportConstantValue)
           newList[index].variable_type = VarKindType.variable

        if (!newList[index].variable)
           newList[index].variable = value[value.length - 1]
      }
      else {
        newList[index].variable_type = VarKindType.constant
        newList[index].value_selector = value as ValueSelector
        newList[index].value = value as string
      }
      props.onChange(newList)
    }
  }

  const handleVarRemove = (index: number) => {
    return () => {
      const newList = [...props.list];
      newList.splice(index, 1)
      props.onChange(newList)
    }
  }


</script>
